<template>
  <a-card>
    <template #title>
      <a-form>
        <a-row :gutter="16">
          <a-col :md="6" :xs="24">
            <a-form-item :label="$t('客户姓名')">
              <a-input v-model:value="page.name"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :xs="24">
            <a-form-item :label="$t('手机号码')">
              <a-input v-model:value="page.phone"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :xs="24">
            <a-form-item :label="$t('消费类型')">
              <a-select v-model:value="page.type" allowClear>
                <a-select-option v-for="item in typeList" :key="item.key" :value="item.key">{{
                    item.value
                  }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :xs="24">
            <a-form-item :label="$t('消费时间')">
              <a-range-picker v-model:value="page.timeValue"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col style="text-align: right" :span="24">
            <a-button type="primary" @click="fetchConsume">{{ $t('查询') }}</a-button>
            <a-button style="margin-left: 10px" @click="resetSearch">{{ $t('重置') }}</a-button>
          </a-col>
        </a-row>
      </a-form>
      <a-table style="margin-top: 20px" :columns="totalTableColumn" :pagination="false" :data-source="totalTableData"
               bordered></a-table>
    </template>
    <a-table row-key="id" :columns="tableColumn" :pagination="pagination" :data-source="tableData" :scroll="{x:1000}">
    </a-table>
  </a-card>
</template>

<script>
import i18n from '@/locale'
import {getConsumeList, getConsumeListTotal} from '../../../api/finance.js'
import {computed, onMounted, reactive, toRefs} from "vue";
import {dateFormatTimeStamp} from '@/utils'
const {t} = i18n.global
const typeList = [
  {key: 1, value: t('流量费')},
  {key: 2, value: t('短信费')},
  {key: 3, value: t('收款服务费')},
]
const tableColumn = [
  {title: t('客户姓名'), dataIndex: 'userName', align: 'center',},
  {title: t('手机号码'), dataIndex: 'phone', align: 'center',},
  {title: t('消费类型'), dataIndex: 'type', align: 'center',customRender: ({text}) => {
      return typeList.find(item=>item.key === text).value
    },},
  {title: t('消费金额'), dataIndex: 'money', align: 'center',},
  {title: t('消费时间'), dataIndex: 'cosumeTime', align: 'center',},
]
const totalTableColumn = [
  { title: t('流量费'), dataIndex: 'flowFee', align: 'center',  },
  {title: t('短信'), dataIndex: 'smsFee', align: 'center',},
  {title: t('收款服务费'), dataIndex: 'serveFee', align: 'center',},
]
export default {
  name: "ConsumptionRecords",
  setup() {
    const state = reactive({
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      tableData: [],
      totalTableData: []
    })
    const pagination = computed(() => ({
      current: state.page.pageNum,
      total: state.page.total,
      pageSize: state.page.pageSize,
      showSizeChanger: true,
      showQuickJumper: true,
      pageSizeOptions: ['10', '50', '100', '200'],
      showTotal: total => total ,
      onChange: (page) => {
        state.page.pageNum = page
        methods.fetchConsume()
      },
      onShowSizeChange: (page, size) => {
        state.page.pageNum = page
        state.page.pageSize = size
        methods.fetchConsume()
      }
    }))
    const methods = {
      async fetchConsume() {
        const [startTime,endTime] = dateFormatTimeStamp(state.page.timeValue || [])
        const params = {
          startTime,endTime,
          ...state.page
        }
        delete params.timeValue
        const res = await getConsumeList(params)
        if (res.code === 1) {
          const {list, total} = res.data
          state.tableData = list
          state.page.total = total
          methods.fetchConsumeTotal(params)
        }
      },
      async fetchConsumeTotal(params) {
        const res = await getConsumeListTotal(params)
        if (res.code === 1 && res.data) {
          state.totalTableData = [res.data]
        }
      },
      resetSearch() {
        state.page = {
          pageNum: 1,
          pageSize: 10,
          total: 0
        }
        methods.fetchConsume()
      },
    }
    onMounted(() => {
      methods.fetchConsume()
    })
    return {
      ...toRefs(state),
      ...methods,
      pagination,
      tableColumn,
      totalTableColumn,
      typeList
    }
  }
}
</script>

<style scoped>

</style>
